<template>
  <div class="substationDetails-box">
    <div class="locklontrol-box borderStyle centerbox relative">
      <div class="title centertitleStyle centerbox title-relative">{{ prjName }}</div>
      <div class="cont-box">
        <div class="top betweenbox">
          <div class="left">
            <div class="title centerbox">
              <span>巡检计划</span>
            </div>
            <div class="details-box">
              <div class="item">
                <div class="colcenterbox">
                  <span>已执行</span>
                  <span>{{newplanData.YZX}}</span>
                </div>
                <div class="colcenterbox">
                  <span>执行中</span>
                  <span>{{newplanData.ZXZ}}</span>
                </div>
              </div>
              <div class="item">
                <div class="colcenterbox">
                  <span>未执行</span>
                  <span>{{newplanData.WZX}}</span>
                </div>
                <div class="colcenterbox">
                  <span>执行失败</span>
                  <span>{{newplanData.ZXSB}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="title centerbox">
              <span>异常测点</span>
            </div>
            <div class="details-box colcenterbox">
              <div class="colcenterbox">
                <span>{{newyccdData.YCCDS}}</span>
              </div>
            </div>
          </div>
        </div>
        <table />
        <div class="bottom">
          <div class="title centerbox">
            <span>巡检报告</span>
          </div>
          <div class="details-box colcenterbox">
            <el-table
            border
              :data="newxjbgData"
              :row-class-name="tableRowClassName"
              style="width: 100%"
              height="100%"
            >
              <el-table-column prop="JXZT" label="计划状态" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="XSLXMC" label="巡检类型" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column
                prop="JHKSSJ"
                label="计划开始时间"
                :show-overflow-tooltip="true"
                width="130"
              ></el-table-column>
              <el-table-column prop="XSJGMC" label="巡检结果" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop label="信息总览" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <i class="el-icon-s-order iconfonts" @click="PopUp(scope.row)"></i>
                </template>
              </el-table-column>
              <el-table-column prop="SFQRMC" label="确认" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-button @click="Jump(scope.row)" :disabled="scope.row.JXZT==='未执行'||scope.row.JXZT==='执行中'" type="primary">{{ scope.row.SFQRMC }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="Manipulation.BDZMC+'巡视报告'"
      top="10vh"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose"
    >
      <report
        v-if="dialogVisible"
        @closeHandel="closeHandel"
        @AlarmPush="AlarmPush"
        :Manipulation="Manipulation"
      />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <el-dialog
      :title="Manipulation.BDZMC+'信息总览'"
      :visible.sync="dialogVisible2"
      width="13rem"
      :before-close="handleClose"
    >
      <SubstationDetailsPopUp
        v-if="dialogVisible2"
        :Manipulation="Manipulation"
        @closexxzl="closexxzl"
      />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <el-dialog
      :title="'推送数据'"
      :visible.sync="dialogVisible3"
      width="90%"
      :before-close="handleClose3"
    >
      <reportPush v-if="dialogVisible3" :Manipulation="paramsData" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SubstationDetailsPopUp from "../../InspectionReport/SubstationDetailsPopUp.vue";
import reportPush from "../../InspectionMonitor/report.vue";
import report from "../../InspectionReport/report.vue";
interface objType {
  row: object;
  rowIndex: number;
}
@Component({
  components: { report, SubstationDetailsPopUp, reportPush },
})
export default class SubstationDetails extends Vue {
  prjName: string = "";
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }

  // 巡检计划执行信息
  private planData = [
    {
      WZX: 0,
      ZXZ: 0,
      YZX: 0,
      ZXSB: 0,
    },
  ];

  // 巡检计划异常测点
  private yccdData = [
    {
      YCCDS: 0,
    },
  ];

  // 巡检报告
  private xjbgData = [
    {
      BDZID: "320159808",
      BDZMC: "220kv桂河变电站",
      ID: "23131231-312312343321-3123123",
      JHKSSJ: "2020-10-13 08:30:00", // 计划开始时间
      JHZT: 1,
      JXZT: "已执行", // 计划状态
      SFQR: 0,
      SFQRMC: "未确认", // 确认
      SSDS: "987876898797897987dewde78979",
      XSJG: 1,
      XSJGMC: "正常", // 巡检结果
      XSLXMC: "例行巡检", // 巡检类型
    },
  ];
  get newplanData() {
    let planData = this.planData[0] || {};
    return planData;
  }
  get newyccdData() {
    let yccdData = this.yccdData[0] || {};
    return yccdData;
  }

  get newxjbgData() {
    let xjbgData = this.xjbgData;
    return xjbgData;
  }

  private init() {
    // 获取当日的变电站巡检计划统计
    (this as any).$services
      .getXjjhData({
        method: "get",
        data: {
          bdzId: this.$route.query.BDZID,
        },
      })
      .then((result: any) => {
        if (result.data) {
          this.planData = result.data.xjjhData;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取变电站所有未确认的异常点数
    (this as any).$services
      .getYccdData({
        method: "get",
        data: {
          bdzId: this.$route.query.BDZID,
        },
      })
      .then((result: any) => {
        if (result.data) {
          this.yccdData = result.data.xjjhData;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
    // 获取变电站巡检报告
    (this as any).$services
      .getXjbgData({
        method: "get",
        data: {
          bdzId: this.$route.query.BDZID,
        },
      })
      .then((result: any) => {
        if (result.data) {
          this.xjbgData = result.data.xjjhData;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 弹窗相关
  dialogVisible = false;
  dialogVisible2 = false;
  dialogVisible3 = false;
  //一行数据
  Manipulation: any = {};

  //点击未确认
  Jump(row: any) {
    if (row.JXZT == "已执行") {
      this.Manipulation = row;
      this.dialogVisible = true;
    }
  }
  //点击信息总览图标
  PopUp(row: any) {
    if (row.JXZT == "已执行") {
      this.Manipulation = row;
      this.dialogVisible2 = true;
    }
  }
  //关闭表格报告 弹框
  closeHandel() {
    this.dialogVisible = false;
    this.init();
  }
  //关闭 信息总览 弹框
  closexxzl() {
    this.dialogVisible2 = false;
    this.init();
  }
  handleClose() {
    this.dialogVisible = false;
    this.dialogVisible2 = false;
  }
  //告警推送
  paramsData = {};
  AlarmPush(val) {
    this.dialogVisible = false;
    this.paramsData = val;
    setTimeout(() => {
      this.dialogVisible3 = true;
    }, 400);
  }
  handleClose3() {
    this.dialogVisible3 = false;
    setTimeout(() => {
      this.dialogVisible = true;
    }, 400);
  }

  private mounted(): void {
    (this as any).prjName = this.$route.query.prjName;
  }
  created() {
    this.init();
  }
}
</script>

<style lang="scss" scoped>
.substationDetails-box {
  width: 100%;
  height: 100%;
  display: flex;
  .locklontrol-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .title {
      cursor: pointer;
      z-index: 1;
    }
    .cont-box {
      width: 100%;
      height: 100%;
      .top {
        width: 100%;
        height: 55%;
        .left {
          width: 50%;
          height: 100%;
          .title {
            width: 1.5rem;
            height: 0.4rem;
            margin: 0.46rem auto 0;
            background: url("../../../../../assets/img/JointInspection/title_bkg_01.png")
              center center no-repeat;
            background-size: 100% 100%;
            span {
              font-size: 0.2rem;
            }
          }
          .details-box {
            width: 100%;
            height: 2.04rem;
            .item {
              width: 100%;
              height: 0.95rem;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 0.1rem;
              > div {
                width: 0.95rem;
                height: 100%;
                background: url("../../../../../assets/img/JointInspection/text_bkg_1.png")
                  center center no-repeat;
                background-size: 100% 100%;
                margin: 0 0.5rem 0 0.4rem;
                span:first-child {
                  font-size: 0.14rem;
                }
                span:last-child {
                  font-size: 0.16rem;
                  color: rgba(225, 228, 39, 1);
                }
              }
            }
          }
        }
        .right {
          width: 50%;
          height: 100%;
          .title {
            width: 1.5rem;
            height: 0.4rem;
            margin-top: 0.46rem;
            margin: 0.46rem auto 0;
            background: url("../../../../../assets/img/JointInspection/title_bkg_01.png")
              center center no-repeat;
            background-size: 100% 100%;
            span {
              font-size: 0.2rem;
            }
          }
          .details-box {
            width: 100%;
            height: 2.04rem;
            > div {
              width: 1.84rem;
              height: 1.43rem;
              background: url("../../../../../assets/img/JointInspection/text_bkg_2.png")
                center center no-repeat;
              background-size: 100% 100%;
              span {
                font-size: 0.24rem;
                color: rgba(225, 228, 39, 1);
              }
            }
          }
        }
      }
      .bottom {
        width: 100%;
        height: 45%;
        .title {
          width: 1.5rem;
          height: 0.4rem;
          margin: 0.1rem auto;
          background: url("../../../../../assets/img/JointInspection/title_bkg_01.png")
            center center no-repeat;
          background-size: 100% 100%;
          span {
            font-size: 0.2rem;
          }
        }
        .details-box {
          width: 100%;
          height: calc(100% - 0.6rem);
          margin-top: 0.1rem;
          .iconfonts {
            cursor: pointer;
          }
        }
      }
    }
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
.substationDetails-box {
  .el-table .cell {
    font-size: 0.14rem;
    text-align: center;
    white-space: nowrap;
  }

  .el-table th > .cell {
    font-size: 0.18rem;
  }

  .el-table th {
    padding: 0.08rem 0;
    font-weight: 400;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0px solid #ebeef5;
  }

  .el-table .row1 {
    background: rgb(41, 171, 226, 0.16);
  }

  .el-table .row2 {
    background: #021d54;
  }

  .el-table__header th {
    background: rgba(0, 180, 255, 0.4);
  }
  .el-table__body td {
    padding: 0.02rem 0;
  }

  .tbody tr:hover {
    background: rgb(41, 171, 226, 0.4);
    cursor: pointer;
  }

  .el-table::before {
    background-color: transparent;
  }

  .details-box {
    .el-button {
      padding: 0 0.08rem;
      margin: 0 auto;
    }
    .el-button--primary {
      height: 0.2rem;
    }
  }
}
</style>
